<template>
  <view class="doctor-card" @tap="navigateToDetail">
    <image class="doctor-image" :src="doctor.imageUrl" mode="aspectFill"></image>
    <view class="doctor-info">
      <text class="doctor-name">{{ doctor.doctorName }}</text>
      <text class="doctor-title">{{ doctor.doctorTitle }}</text>
      <text class="doctor-department">{{ doctor.department }}</text>
      <view class="doctor-hospital-section">
        <text class="doctor-hospital">{{ doctor.hospital.name }}</text>
        <text v-if="doctor.hospital.type" class="hospital-type">{{ doctor.hospital.type }}</text>
      </view>
      <!-- 使用 rich-text 来渲染富文本内容 -->
      <view class="doctor-description">
        <rich-text :nodes="truncatedDescriptionNodes"></rich-text>
      </view>
      <view class="doctor-footer">
        <text class="doctor-price">￥{{ doctor.price }}起</text>
        <button class="consult-button">去咨询</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "DoctorCard",
  props: {
    doctor: {
      type: Object,
      default: () => ({
        id: 1,
        imageUrl: '/static/images/default-doctor.png',
        doctorName: '未知医生',
        doctorTitle: '未知职称',
        department: '未知科室',
        hospital: {
          name: '未知医院',
          type: '' // 医院类型在这里定义
        },
        description: '<p>暂无描述信息。</p>',
        bio: '<p>暂无简介。</p>',
        price: 0
      })
    }
  },
  computed: {
    truncatedDescriptionNodes() {
		const maxLength = 50; //设定最大字符数
      // 通过此函数，将 "擅长：" 和 doctor.description 拼接成富文本节点
      let content = `擅长：${this.stripHTML(this.doctor.description)}`;
	  if(content.length > maxLength){
		  content = content.substring(0,maxLength) + '...';
	  }
	  return [{
		  type:'text',
		  text:content
	  }];
    }
  },
  methods: {
     stripHTML(html) {
          // 使用正则表达式移除HTML标签
          return html.replace(/<[^>]+>/g, '');
    },
	navigateToDetail(){
		//使用uni.navigatoTo进行页面跳转，并传递医生的id
		uni.navigateTo({
			url:`/pages/doctorDetail/doctorDetail?id=${this.doctor.id}`
		})
	}
  }
}
</script>

<style scoped>
.doctor-card {
  display: flex;
  flex-direction: row;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
}

.doctor-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10px;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px; /* 增加姓名和职称之间的间距 */
}

.doctor-title {
  color: #333;
  margin-left: 10px; /* 增加职称和科室之间的间距 */
  margin-right: 10px; /* 如果需要增加职称和医院名之间的间距 */
  font-size: 14px;
}

.doctor-department {
  color: #333;
  margin-left: 10px; /* 增加科室和其他元素之间的间距 */
  font-size: 14px;
}

.doctor-hospital-section {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.doctor-hospital {
  font-size: 14px;
  color: #666;
}

.hospital-type {
  background-color: #00c3b0;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  padding: 2px 5px;
  margin-left: 5px;
}

.doctor-description {
  margin-top: 10px;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}

.doctor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.doctor-price {
  color: #f00;
  font-weight: bold;
}

.consult-button {
  background-color: #00bad4;
  color: #fff;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 14px;
  margin-right: 10px; /* 增加按钮右边的外边距，使按钮向右移动 */
}

</style>
